<template>
    <div id="login">
      <div class="head">
        <router-link class="return" to='/'><img src="../assets/return.png"></router-link>
        <span>注册账号</span>
        <div class="navigation" v-on:click="navigation();">
          <img src="../assets/navigation.png">
          <span>导航</span>
        </div>
      </div>
      <div class="nav" v-show="flag">
        <router-link class="homepage1" to="/">
          <img src="../assets/homepage.png">
          <span>首页</span>
        </router-link>
        <router-link class="mine1" to="mine">
          <img src="../assets/mine.png">
          <span>我的</span>
        </router-link>
        <router-link class="search1" to="search">
          <img src="../assets/search.png">
          <span>搜索</span>
        </router-link>
      </div>
    </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      flag: false
    }
  },
  methods: {
    navigation: function () {
      this.flag = !this.flag
    }
  }
}
</script>

<style scoped lang="scss">
  #login{
    width: 6.4rem;
    margin: 0 auto;
  }
  .head{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    margin: 0 ;
    padding: 0;
    width: 100%;
    height: 1rem;
    background-color: #06c1ae;
    border-bottom:1px solid #21897d;
  .return{
  img{
    display: block;
    width: .5rem;
    height: .5rem;
    margin: .25rem;
  }
  }
  span{
    font-size: .4rem;
    line-height: 1rem;
    color: #fff;
  }
  .navigation{
    display: flex;
    flex-direction: column;
    align-content: center;
    margin-right: .2rem;
    width: .6rem;
  img{
    display: block;
    width: .4rem;
    height: .4rem;
    margin: .1rem ;
  }
  span{
    display: block;
    line-height: .4rem;
    font-size: .2rem;
    text-align: center;
  }
  }
  }
  .nav{
    margin: .05rem .05rem 0 0;
    width: 2rem;
    height: 2.4rem;
    flex-direction: column;
    background-color: #06c1ae;
    opacity: 0.9;
    display: flex;
    position: absolute;
    right: 0;
    z-index: 5;
  .homepage1,.mine1, .search1{
    display: flex;
    border-bottom: 1px solid #21897d;
    text-align: center;
    font-size: .35rem;
    line-height: .8rem;
    color: #fff;
  }
  img{
    display: block;
    width: .4rem;
    height: .4rem;
    margin: .2rem;
  }
  }
</style>
